<template>
  <div class="author">这个动画感觉怎么样。。。。</div>
  <div class="login"
       ref="loginRefs">
    <div class="login-contain">
      <el-form :rules="rules"
               :model="formLabelAlign"
               style="max-width: 360px"
               size="large"
               title="登录">
        <div class="contentLogin">
          <h2 class="login-title">登录</h2>
          <el-form-item prop="name">
            <el-input v-model="formLabelAlign.name"
                      placeholder="请输入账号"
                      :prefix-icon="Avatar"
                      :clearable="true" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="formLabelAlign.password"
                      type="password"
                      placeholder="请输入密码"
                      show-password
                      :clearable="true"
                      :prefix-icon="Lock" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       round
                       @click="submitForm(formLabelAlign)">登录</el-button>
            <el-button type="primary"
                       round
                       @click="getskinPeeler()">换肤</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { Avatar, Lock } from "@element-plus/icons-vue";
import { userService } from "@/services";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import changeImage from "./changeImage.js";
export default {
  name: "Login",
  setup() {
    const router = useRouter();
    const formLabelAlign = reactive({
      name: "",
      password: ""
    });
    const rules = reactive({
      name: [
        {
          required: true,
          message: "请把账号填上",
          trigger: "blur"
        }
      ],
      password: [
        {
          required: true,
          message: "请把密码填上",
          trigger: "change"
        }
      ]
    });
    // 提交输入框信息
    const submitForm = (formLabelAlign) => {
      const { name, password } = formLabelAlign;
      if (name.length == 0 || password.length == 0) {
        ElMessage.error("账号或者密码为空，你可长点心");
      } else {
        userService.login(name, password).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            router.push({
              path: "/home"
            });
            ElMessage({
              message: res.data.result.message,
              type: "success"
            });
          } else {
            ElMessage.error(res.data.result.message);
          }
        });
      }
    };
    const { state, skinPeeler } = changeImage();
    const loginRefs = ref(null);
    const getskinPeeler = () => {
      loginRefs.value.style.backgroundPositionX = "-150vw";
      setTimeout(() => {
        skinPeeler();
        loginRefs.value.style.backgroundPositionX = "0vw";
      }, 1000);
    };
    return {
      formLabelAlign,
      rules,
      submitForm,
      state,
      getskinPeeler,
      loginRefs,
      Avatar,
      Lock
    };
  }
};
</script>

<style lang="less" scoped>
.login {
  background-image: v-bind("state.backgroundUrl");
}
@import url("./index.less");
</style>
